import React, { useState, useEffect} from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/pie';
const Tx = (props) => {
  let [main, setMain] = useState('')
  const option = {
    title: {
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      top: '5%',
      left: 'left',
      data: ['地震灾害风险区域', '地质灾害风险区域', '气象灾害风险区域', '洪涝灾害风险区域', '森林火灾风险区域']
    },
    series: [
      {
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
          { value: 335, name: '地震灾害风险区域' },
          { value: 310, name: '地质灾害风险区域' },
          { value: 234, name: '气象灾害风险区域' },
          { value: 135, name: '洪涝灾害风险区域' },
          { value: 1548, name: '森林火灾风险区域' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  useEffect(() => {
    var node = document.getElementById('main')
    setMain(node)
  }, [main])
  if (main !== "") {
    var myChart = echarts.init(main);
    myChart.setOption(option);
  }
  return (
    <div style={{ height: "300px", width: "400px" }} id="main"></div>
  )
}
export default Tx;
